<script lang="ts" setup>
import TreeMenu from "./side/tree-menu.vue"
import MenuOp from "./side/menu-op.vue"
</script>

<template>
  <el-container height="100%" class="sys-menu">
    <el-aside width="300px" class="aside">
      <div class="aside-menu"><TreeMenu /></div>
    </el-aside>
    <el-main class="main">
      <MenuOp />
    </el-main>
  </el-container>
</template>

<style scoped lang="scss">
$bg_color: #ebf0f6;
.sys-menu {
  overflow: hidden;
  background-color: $bg_color;

  .aside {
    border-radius: 5px;
    background-color: white;
    overflow: auto;
    .aside-menu {
      margin: 10px 0 10px 18px;
    }
  }

  .aside::-webkit-scrollbar {
    width: 6px;
  }

  .aside::-webkit-scrollbar-thumb {
    background-color: skyblue;
    background-image: -webkit-linear-gradient(
      45deg,
      rgba(255, 255, 255, 0.2) 25%,
      transparent 25%,
      transparent 50%,
      rgba(255, 255, 255, 0.2) 50%,
      rgba(255, 255, 255, 0.2) 75%,
      transparent 75%,
      transparent
    );
  }

  :deep(.el-main) {
    padding: 0 !important;
    margin: 0 0 0 10px;
    background-color: white;
  }

  .main {
    border-radius: 5px;
  }
}
</style>
./side/menu-op.vue
